<template>
  <section class="firm-manage" v-cloak>
    <div class="info-title"><span class="icon"></span>访问记录</div>
    <form @keyup.enter="search" @submit.prevent>
      <el-row class="search-box">
        <el-col :span="24">
          <label for="" class="choose">
            <span>时间：</span>
            <el-date-picker v-model="form.Timepicker[0]" type="date" size="small"  class="width150" placeholder="请选择时间" :picker-options='dateTstart'></el-date-picker>
            &nbsp;至&nbsp;
            <el-date-picker v-model="form.Timepicker[1]" type="date" size="small"  class="width150" placeholder="请选择时间" :picker-options='dateTend'></el-date-picker>
          </label>
          <label for="" class="choose">
            <span>姓名：</span>
            <el-input size="small" class="width200 padding-b15" placeholder="请输入客户名称" v-model.trim="form.name" :maxlength="50"></el-input>
          </label>
          <label for="" class="choose">
            <span>设备号：</span>
            <el-input size="small" class="width200 padding-b15" placeholder="请输入客户名称" v-model.trim="form.sn" :maxlength="50"></el-input>
          </label>
          <label for="" class="choose">
            <span>身份证：</span>
            <el-input size="small" class="width200 padding-b15" placeholder="请输入操作人" v-model.trim="form.id_number" :maxlength="50"></el-input>
          </label>
          <label for="" class="choose">
            <el-button icon="search" type="primary" size="small" @click="search" v-resetClick>搜索</el-button>
          </label>
        </el-col>
      </el-row>
    </form>
    <el-row class="data-list">
      <el-table :data="lists" border class="table_box" style="width:100%" :empty-text="emptyText">
        <el-table-column prop="sn" label="设备号" align="center"> </el-table-column>
        <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
        <el-table-column prop="id_number" label="身份证号" align="center"></el-table-column>
        <!-- <el-table-column prop="created" label="来访时间" align="center">
          <template slot-scope="scope">{{scope.row.created | TXtimeFormat()}}</template>
        </el-table-column> -->
        <el-table-column prop="address" label="地址" align="center"></el-table-column>
        <el-table-column prop="birthday" label="出生日期" align="center"></el-table-column>
        <el-table-column prop="expiration_date" label="有效期" align="center"></el-table-column>
        <el-table-column prop="gender" label="性别" align="center"></el-table-column>
        <el-table-column prop="nation" label="民族" align="center"></el-table-column>
        <!-- <el-table-column prop="temperature" label="温度" align="center"></el-table-column>
        <el-table-column prop="status" label="健康码状态" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status === 1" style="background: #3ba506;color: #FFFFFF;width: 50px;  margin: 0 auto; border-radius: 10px;">绿码</div>
            <div v-if="scope.row.status === 2" style="background: #e8b364;color: #FFFFFF;width: 50px;  margin: 0 auto; border-radius: 10px;">黄码</div>
            <div v-if="scope.row.status === 3" style="background: #de3939;color: #FFFFFF;width: 50px;  margin: 0 auto; border-radius: 10px;">红码</div>
          </template>
        </el-table-column>
        <el-table-column prop="storage_personnel" label="存储人员" align="center"></el-table-column>
        <el-table-column prop="nucleic_acid_type" label="核酸类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.nucleic_acid_type === '0'">无核酸记录</span>
            <span v-if="scope.row.nucleic_acid_type === '1'">阴性</span>
            <span v-if="scope.row.nucleic_acid_type === '2'">阳性</span>
            <span v-if="scope.row.nucleic_acid_type === '9'">网络异常</span>
          </template>
        </el-table-column>
        <el-table-column prop="nucleic_acid_cycle" label="核酸周期" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.nucleic_acid_cycle === '024'">处于核酸24小时内</span>
            <span v-if="scope.row.nucleic_acid_cycle === '048'">处于核酸48小时内</span>
            <span v-if="scope.row.nucleic_acid_cycle === '072'">处于核酸72小时内</span>
            <span v-if="scope.row.nucleic_acid_cycle === '168'">处于核酸7天内</span>
            <span v-if="scope.row.nucleic_acid_cycle === '336'">处于核酸14天内</span>
            <span v-if="scope.row.nucleic_acid_cycle === '000'">无要求，不限时间</span>
            <span v-if="scope.row.nucleic_acid_cycle === '999'">网络异常</span>
          </template>
        </el-table-column>
        <el-table-column prop="vaccination_num" label="疫苗接种针数" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.vaccination_num">{{scope.row.vaccination_num === '00' ? '无疫苗接种记录' : `接种第${Number(scope.row.vaccination_num)}针`}}</span>
            <span v-else>网络异常</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="scanTime" label="来访时间" align="center">
          <template slot-scope="scope">{{scope.row.created}}</template>
        </el-table-column>
      </el-table>
      <paginate :callback="pageObj.callback" :page="pageObj.page"></paginate>
    </el-row>
    <equipment-list v-if="isequipmentList" @beforeCloseEven="beforeCloseEven" :shipment_id="shipment_id"></equipment-list>
    <add-shipment v-if="isDialogShow" @addShipmentEvem="addShipmentEvem" :shipmentCopyData="shipmentData"></add-shipment>
  </section>
</template>
<script>
import { deviceswipedata } from 'api/txEquipment/index'
import ctable from 'components/common/ctable'
import equipmentList from 'components/equipmentList.vue'
import addShipment from 'components/addShipment.vue'
import paginate from 'components/common/paginate'
import common from 'src/util/common.js'
import { vueTimeFormat } from 'src/filter/index'
export default {
  data () {
    // let year = new Date().getFullYear()
    // let month = new Date().getMonth()
    // let dataV = new Date().getDate()
    // let startDate = new Date(year, month, dataV - 7)
    // let endDate = new Date(year, month, dataV)
    return {
      dateTstart: {
        disabledDate: time => {
          return (
            time.getTime() > (this.form.Timepicker[1] || Date.now())
          )
        }
      },
      dateTend: {
        disabledDate: time => {
          return (
            time.getTime() > Date.now() || time.getTime() < (this.form.Timepicker[0] || (Date.now() - 8.64e7))
          )
        }
      },
      shipment_id: null,
      interfacebaseList: [],
      isDialogShow: false,
      formLabelWidth: '120px',
      formLabelWidth2: '60px',
      form: {
        name: '',
        id_number: '',
        sn: '',
        Timepicker: [] // 缴费日期
      },
      formObj: {},
      isequipmentList: false,
      shopName: '', // 厂商名称
      lists: [], // 数据列表
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      shipmentData: {}
    }
  },
  created () {
    this.filterObjEvemt()
  },
  components: {
    paginate,
    ctable,
    equipmentList,
    addShipment
  },
  methods: {
    beforeCloseEven () {
      this.isequipmentList = false
    },
    addShipmentEvem (obj) {
      if (obj.type === 1) {
        this.filterObjEvemt()
      }
      this.isDialogShow = false
    },
    getData (int) { // 获取数据
      deviceswipedata({
        pageIndex: int - 1,
        pageSize: 10,
        ...this.formObj
      }).then(res => {
        res.data && res.data.forEach(obj => {
          obj.timeOBJ = `${obj.start_time} ~ ${obj.end_time}`
        })
        this.lists = res.data
        this.pageObj.page = res.page
      })
    },
    search () {
      this.filterObjEvemt()
    },
    vueTimeFormats (value) {
      return vueTimeFormat(value, 'yyyy-MM-dd')
    },
    filterObjEvemt () {
      let obj = {}
      for (const key in this.form) {
        if (this.form[key] === '' || this.form[key] === null || this.form[key] === undefined) continue
        switch (key) {
          case 'Timepicker':
            if (this.form.Timepicker.length && this.form.Timepicker[0] && this.form.Timepicker[1]) {
              obj.start_time = this.vueTimeFormats(parseInt(common.div((new Date(this.form.Timepicker[0])).getTime(), 1000)))
              obj.end_time = this.vueTimeFormats(parseInt(common.div((new Date(this.form.Timepicker[1])).getTime(), 1000)))
            }
            break
          default:
            obj[key] = this.form[key]
            break
        }
      }
      this.formObj = JSON.parse(JSON.stringify(obj))
      this.getData(1)
      return obj
    }
  }
}
</script>
<style lang="less">
  .itemBoxName .el-form-item__error{
    z-index: 100;
    top: 60%;
  }
</style>
<style lang="less" scoped>
.firm-manage {
  .width200{width: 200px;}
  .width150{width: 150px;}
  .title {
    overflow: hidden;
    padding: 16px 30px;
    padding-bottom: 0;
  }
  .search-box {
    padding: 20px 30px;
    background: #ffffff;
  }
  .data-list {
    padding: 10px 30px;
  }
  .choose {
    margin-right: 10px;
    .select-box {
      width: 120px;
    }
    .year-box {
      width: 150px;
    }
  }
  .titleright{
    float: right;
    margin-left: 20px;
  }
}
</style>
